<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构注册</title>
    <load href='__PUBLIC__/bower_components/bootstrap/dist/css/bootstrap.min.css' />
    <load href='__PUBLIC__/assets/css/min.css' />
    <load href='__PUBLIC__/jquery-1.10.0.js'/>
    <load href='__PUBLIC__/jquery.validate-1.13.1.js'/>
</head>
<body>

<script>
    jQuery.validator.addMethod("isPhone", function(value,element) {
        var length = value.length;
        var mobile = /^1[3|4|5|8|7][0-9]\d{4,8}$/;
        var tel=/^(\d{3,4}-)?\d{7,8}$/;
        return this.optional(element) || (tel.test(value) || mobile.test(value));
    }, "请正确填写联系电话");

    $(document).ready(function () {
        $("#form-horizontal").validate({
            debug:false,
            errorPlacement: function(error, element) {
                error.appendTo(element.parent().parent().find('.error-msg'));
            },
            rules: {
                Username: {
                    required: true,
                    minlength: 6,
                    maxlength: 16
                },
                Password: {
                    required: true,
                    minlength: 6,
                    maxlength: 16
                },
                "rePassword": {
                    equalTo: "#Password"
                },
                Description:{
                    required:true,
                    minlength:50
                },
                PhoneNumber:{
                    required:true,
                    isPhone:true
                }
            },
            messages: {
                Username: {
                    required: '*请输入用户名',
                    minlength: '*用户名不能少于6个字符',
                    maxlength: '*用户名不能超过16个字符',
                    remote: '*用户名不存在'
                },
                Password: {
                    required: '*请输入密码',
                    minlength: '*密码不能少于6个字符',
                    maxlength: '*密码不能超过16个字符'
                },
                "rePassword": {
                    equalTo: "*两次输入密码不一致！"
                },
                Description:{
                    required:'*请输入简介',
                    minlength:'*简介不能少于50字'
                },
                PhoneNumber:{
                    required:'*请输入电话号码',
                    isPhone:'*请填写正确格式的电话号码'
                }
            }
        });
        $("#check").click(function () {
            console.log($("#form-horizontal").valid() ? "填写正确" : "填写不正确");
        });
    });
</script>

<div class="register">
    <div>
        <form  class="form-horizontal" id="form-horizontal" name="form-horizontal" method="post">
            <div class="form-group">
                <label for="Username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" id="Username" name="Username" class="form-control" value="" placeholder="6-16个字符">
                </div>
                <div class="error-msg"></div>
            </div>

            <div class="form-group">
                <label for="Password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password"  id="Password" name="Password" class="form-control" value="" placeholder="6-16个字符">
                </div>
                <div class="error-msg"></div>
            </div>

            <div class="form-group">
                <label for="rePassword" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input type="password" id="rePassword" name="rePassword" class="form-control" value="" placeholder="请确认密码">
                </div>
                <div class="error-msg"></div>
            </div>

            <div class="form-group">

                <label class="col-sm-2 control-label">地理位置</label>
                <div class="col-sm-10">
                    <select class="form-control" name="Location">
                        <option value="合肥">合肥</option>
                        <option value="芜湖">芜湖</option>
                        <option value="六安">六安</option>
                        <option value="铜陵">铜陵</option>
                        <option value="安庆">安庆</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">简介</label>
                <div class="col-sm-10">
                    <textarea name="Description" id="Description" value="" placeholder="请输入50-100字的简介"></textarea>
                </div>
                <div class="error-msg"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">电话号码</label>
                <div class="col-sm-10">
                    <input type="text" id="PhoneNumber" name="PhoneNumber" class="form-control" value="">
                </div>
                <div class="error-msg"></div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" name="submit" id="check" value="2" class="btn btn-default">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
</html>